<template>
  <!-- 设备管理 -->
  <treeBox v-loading="totalLoading">
    <template #tree>
      <TreeList :tree-data="treeData" />
    </template>
    <template #detailBody>
      <div class="tree-right-detail-box">
        <CardSearch ref="cardSearch" :config="cardSearchConfig" />
        <div v-loading="detailContainer" class="detailContainer">
          <h1 class="title">组态列表</h1>
          <div class="scadaContainer">
            <ScadaItem
              v-for="item in scadaList"
              :key="item.id"
              :scada="item"
              @set="setScada"
              @copy="copyScada"
              @del="delScada"
            />
          </div>
        </div>
        <AddOrUpdateDialog
          v-if="addOrUpdateConfig.visible"
          ref="addOrUpdate"
          :config="addOrUpdateConfig"
          @refreshData="refreshData"
        />
        <!-- <el-dialog v-if='previewDialog.visible' width='1540px' title="预览视频" :visible.sync="previewDialog.visible">
          <iframe style="height:560px;width:100%" ref="iframe" frameborder="0" scrolling="auto" :src="previewDialog.url"></iframe>
          <span slot="footer" class="dialog-footer">
            <el-button @click="previewDialog.visible = false">关 闭</el-button>
          </span>
        </el-dialog> -->
      </div>
    </template>
  </treeBox>
</template>

<script>
import CardSearch from '@/components/cardSearch/index.vue'
import AddOrUpdateDialog from '@/components/addOrUpdateDialog/index.vue'
import { tBaseMixin } from '@/views/layout/treeOrDetailFrame/components/tBaseMixIn'
import ScadaItem from './components/scadaItem.vue'
import { getFindScadaList, deleteScada } from '@/api/scada'
import { getProjectRoot } from '@/api/project'
import { removeSlash } from '@/utils/removeIdSlash'
import TreeList from '@/components/treeList/index.vue'
import moment from 'moment'
import useGlobal from '@/hooks/global/useGlobal'
const { $message } = useGlobal()

export default {
  name: 'MaintainingInfo',
  components: { CardSearch, AddOrUpdateDialog, TreeList, ScadaItem },
  mixins: [tBaseMixin],
  data() {
    return {
      scadaList: [],
      detailContainer: false,
      tenantId: '',
      // previewDialog: {
      //   visible: false,
      //   url: ''
      // },
      cardSearchConfig: {
        operation: {
          search: { text: '查询', handle: () => this.refreshData() },
          add: {
            text: '添加组态',
            perm: true,
            handle: () => {
              this.addOrUpdateConfig.defaultValue = {
                originatorId: this.treeData.currentProject.id,
                protect: 0,
                protectPwd: '',
                tenantId: this.tenantId,
                chartType: 'cloud'
              }
              this.addOrUpdateConfig.title = '添加组态'
              this.addOrUpdateConfig.visible = true
            }
          }
        },
        filters: [{ label: '搜索', key: 'name', type: 'input', width: '360px' }]
      },
      addOrUpdateConfig: {
        visible: false,
        title: '添加设备',
        close: () => {
          this.addOrUpdateConfig.visible = false
        },
        addUrl: 'api/dashChart/save',
        editUrl: 'api/dashChart/save',
        defaultValue: {},
        externalParams: {},
        setSubmitParams: params => ({
          dashChart: params,
          token: this.$store.state.user.scadaToken
        }),
        width: '120px',
        columns: [
          {
            type: 'input',
            label: '组态名称',
            key: 'name',
            rules: [{ required: true, message: '请填写组态名称' }]
          },
          {
            type: 'textarea',
            label: '备注',
            key: 'detail'
          }
        ]
      },
      treeData: {
        that: this,
        title: '项目列表',
        data: [],
        loading: false,
        isFilterTree: true,
        currentId: '',
        currentProject: {},
        expandNodeId: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treeNodeHandleClick: data => {
          // 设置当前选中项目信息
          this.treeData.currentProject = data
          this.refreshData()
        }
      }
    }
  },
  created() {
    this.tenantId = removeSlash(this.$store.state.user.tenantId)
    this.refreshTree(true)
  },

  methods: {
    async refreshData(isFirst) {
      this.detailContainer = true
      const paramsObj = {
        // page: 1,
        // size: 99,
        originatorId: this.treeData.currentProject.id
      }
      if (!isFirst) Object.assign(paramsObj, this.$refs.cardSearch.queryParams)
      try {
        const res = await getFindScadaList(paramsObj)
        this.detailContainer = false
        if (res.status === 200) {
          this.scadaList = []
          for (const val of res.data) {
            val.keyId = val.id
            val.time = moment(val.createTime).format('YYYY/MM/DD HH:mm:ss')
            if (val.chartType !== 'local') {
              this.scadaList.push(val)
            }
          }
        } else {
          $message.error('获取失败')
        }
      } catch (error) {
        console.log(error)
        this.detailContainer = false
      }
    },
    refreshTree(isFirst) {
      getProjectRoot()
        .then(res => {
          if (res.data) {
            this.treeData.data = res.data
            const fTData = this.treeData.data.filter(v => !v.disabled)
            this.treeData.currentProject = fTData[0]
            this.refreshData(isFirst)
            this.totalLoading = false
          } else {
            $message('暂无项目 不可操作，请创建项目')
            this.totalLoading = false
          }
        })
        .catch(err => {
          console.log(err)
          $message('暂无项目 不可操作，请创建项目')
          this.totalLoading = false
        })
    },

    setScada(scada) {
      this.addOrUpdateConfig.defaultValue = scada
      this.addOrUpdateConfig.visible = true
    },

    copyScada(scadaId) {
      console.log(scadaId)
    },
    delScada(dashBoardId) {
      const params = {
        id: dashBoardId,
        token: this.$store.state.user.scadaToken
      }
      deleteScada(params).then(() => {
        $message({
          type: 'success',
          message: '删除成功'
        })
        this.refreshData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cardSearch {
  margin: 16px 0;
  background: #fff;
}
input {
  height: 48px;
}
.tableBox {
  margin-top: 20px;
}
.detailContainer {
  width: 100%;
  flex: 1;
  background-color: #fff;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 16px;
  .title {
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 25px;
    margin: 0 0 24px 0;
  }
  .scadaContainer {
    display: flex;
    flex-wrap: wrap;
    .scadaBox {
      margin-bottom: 36px;
      margin-right: 52px;
      width: 400px;
      height: 300px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      border: 1px solid #dadada;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>
